<template>
  <div class="order_box">
    <topHeader>
      <div slot="left">
        <img src="./../../assets/img/return.png" alt="" @click="goIndex">
      </div>
      <div slot="center">
        <span>乘客预约</span>
      </div>
    </topHeader>
    <div class="user_order_con">
      <div class="begin_city_box">
        <div class="dot"></div>
        <div class="title">出发城市</div>
        <div class="city" @click="choseCity(0)">{{ startCity }}</div>
      </div>
      <div class="end_city_box">
        <div class="dot"></div>
        <div class="title">结束城市</div>
        <div class="city" @click="choseCity(1)">{{ endCity }}</div>
      </div>
      <div class="help_call_box">
        <div class="help">
          <div><img src="./../../assets/img/clock.png" alt=""></div>
          <div style="width:23%">出发时间</div>
          <div style="width:60%">
            <Datetime
              width="50%"
              v-model="value5"
              format="YYYY-MM-DD HH:mm"
              @on-change="changeTime"
              :placeholder="'请选择出发时间'"
              year-row="{value}年"
              month-row="{value}月"
              day-row="{value}日"
              hour-row="{value}点"
              minute-row="{value}分"
              confirm-text="完成"
              cancel-text="取消">
              </Datetime>
            </div>
          <!-- <div><input type="text" placeholder="请选择出发时间"></div> -->
        </div>
      </div>
      <div class="car_box">
        <div class="icon">
          <img src="./../../assets/img/people_1.png" alt="">
        </div>
        <div class="title">
            乘车人数
        </div>
        <div class="input_box_num">
          <popup-picker
          :placeholder="'人数'"
          :data="orderPeopleList"
          v-model="peopleNum"
          @on-change="onPeopleChange">
          </popup-picker>
        </div>
        <div class="uptel_1">
        </div>
      </div>
      <div class="car_box">
        <div class="icon">
          <img src="./../../assets/img/people_1.png" alt="">
        </div>
        <div class="title">
            等待时间
        </div>
        <div class="input_box_num">
          <popup-picker
          :placeholder="'请选择等待时间'"
          :data="list2"
          v-model="waitTime"
          @on-change="onDateChange">
          </popup-picker>
          <!-- <div>小时</div> -->
        </div>
        <div class="uptel_1">
        </div>
      </div>
      <div class="summit_btn" @click="sumitOrder">
        提交预约
      </div>
    </div>
    <popup v-model="cityShow" position="bottom" width="100%" height="100%">
      <div class="city_box">
        <topHeader>
          <div slot="center">
            <span>城市选择</span>
          </div>
          <div class="close" slot="right" @click="closeCity">
            &times;
          </div>
        </topHeader>
        <div class="city city-wap">
          <div class="search">
            <input type="text" placeholder="城市搜索" v-model="citySelect" @change="searchCity">
          </div>
          <div class="search_con">
            <div class="city_li" v-for="item of citySearchs" @click="choseOneCity(item.cityname)">{{ item.cityname }}</div>
          </div>
          <div class="city-list" ref="cityWarp">
            <div class="block-60"></div>
            <div v-for="item in cityListData" class="clearfix">
              <p :id="item.ckey">{{item.ckey}}</p>
              <ul>
                <li v-for="ritem in item.cityList" @click="choseOneCity(ritem.airportName)">{{ritem.airportName}}</li>
              </ul>
            </div>
          </div>
          <div class="filter">
            <div v-for="item in cityListKey" @click="switchKey(item)">{{item}}</div>
          </div>
          <div class="active-key" v-if="activeKey">{{activeKey}}</div>
        </div>
      </div>
    </popup>
    <!-- <toast v-model="orderSuccess" @on-hide="onToastHide">预约成功</toast> -->
  </div>
</template>

<script>
/* eslint-disable */
import { loadCitys, searchCity, nocarOrder } from '@/api/allapis'
import topHeader from './../../components/topHeader'
import { PopupPicker, Datetime, Popup } from 'vux'
export default {
  data () {
    return {
      waitTime: [],
      value5: '',
      orderPeopleList: [[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]],
      peopleNum: [],
      list2: [['完全匹配','前后0.5小时','前后1.0小时','前后1.5小时','前后2小时']],
      cityShow: false,
      cityLists: [],
      startCity: '',
      endCity: '',
      activeKey: '',
      dataList: [],
      citySelect: '',
      citySearchs: [],
      params:{
        start: '',
        end: '',
        outtime: '',
        num: '',
        waittime: '',
        userid: ''
      },

    }
  },

  components: {
    topHeader,
    PopupPicker,
    Datetime,
    Popup
  },

  computed: {
    cityListData(){
      let map = {}; // 处理过后的数据对象
      let temps = []; // 临时变量
      this.dataList.map(item=>{
          if(item.airportcode){
              let ekey = item.airportcode.charAt(0).toUpperCase(); // 根据key值的第一个字母分组，并且转换成大写
              temps = map[ekey] || []; // 如果map里面有这个key了，就取，没有就是空数组
              temps.push({
                  airportcode: item.airportcode,
                  airportName: item.cityname
              });
              map[ekey] = temps;
          }
      })
      let list = [];
      for(let gkey in map) {
          list.push({
              ckey: gkey,
              cityList: map[gkey]
          })
      }

      list = list.sort((li1, li2)=> li1.ckey.charCodeAt(0) - li2.ckey.charCodeAt(0));
      return list;
    },
    cityListKey(){
      let cityListKey = [];
      this.cityListData.map(item=>{
          cityListKey.push(item.ckey);
      })
      return cityListKey;
    }
  },

  mounted () {
    this.loadCityList()
  },

  methods: {
    sumitOrder () {
      this.params.start = this.startCity
      this.params.end = this.endCity
      this.params.userid = this.$store.state.user.uerInfo.id
      nocarOrder(this.params).then(res => {
        this.$vux.alert.show({
          title: '人人同行提示',
          content: res.msg,
          buttonText: '好的',
          hideOnBlur: true,
          maskZIndex: 100
        })
      })
      this.$router.push({ name: 'searchcar', query: { start: this.params.start, end: this.params.end } })
    },
    goIndex () {
      this.$router.go(-1)
    },
    changeTime (val) {
      // console.log(val)
      this.params.outtime = `${val}:00`
      console.log(this.params.outtime)
    },
    onPeopleChange (val) {
      this.params.num = val.join('')
     
    },
    onDateChange (val) {
      this.params.waittime = val.join('')
      console.log(val.join(''))
    },
    loadCityList () {
      let self = this
      loadCitys().then(res => {
        self.dataList = res.data
      })
      // axios.get('/wx/static/mock/city.json').then(function (response) {
      //   self.dataList = response.data.dataList
      // }).catch(function (error) {
      //   console.log(error)
      // })
    },
    searchCity () {
      searchCity({name: this.citySelect}).then(res => {
        this.citySearchs = res.data
      })
    },
    choseCity (type) {
      this.citySearchs = []
      this.citySelect = ''
      this.cityType = type
      this.cityShow = true
    },
    switchKey(key){
      // 当前选中的字母
      this.activeKey = key;
      // 1秒后清空，让`active-key`隐藏
      setTimeout(()=>{
      this.activeKey = '';
      }, 1000)
      // 获取当前字母来cityList中距离顶部的位置
      let targetTop = document.querySelector('#'+key+'').offsetTop;
      console.log(targetTop)
      this.$nextTick(() => {
        console.log(this.$refs.cityWarp.scrollTop)
        this.$refs.cityWarp.scrollTop = targetTop-80
        // this.$refs.cityWarp.style.top = `-${targetTop}px`
      })
      // document.getElementById('cityWarp').scrollTop = 200
      // console.log(document.getElementById('city_warp'))
      // // window.scrollTo({ 
      //   top: targetTop - 100, // 60是search的高度
      //   behavior: "smooth" 
      // });
    },
    closeCity () {
      this.cityShow = false
    },
    choseOneCity (cityName) {
      if(this.cityType === 0) {
        this.cityShow = false
        this.startCity = cityName
      } else {
        this.cityShow = false
        this.endCity = cityName
      }
    }
  }
}

</script>
<style lang='less' scoped>
@import url('./nocarorder.less');
</style>